
<html>
<head>
    <title>Title</title>
    <link href="/lib/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
<input id="addBtn" type="button" value="新增一级菜单" class="layui-btn">
<table id="table1"></table>
<!--弹出窗口模版-->

<script id="template1" type="text/html">
    <form class="layui-form" action="" lay-filter="form1">

        <div class="layui-form-item" style="margin-top: 15px">
            <div class="layui-inline">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="id" class="layui-input"/>
                    <input id="name" type="text" name="name" class="layui-input"/>
                </div>
            </div>
        </div>
        <input type="hidden" id="parentId" name="parentId" autocomplete="off" class="layui-input"/>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分类图标</label>
                <div class="layui-input-inline">
                    <img id="avatarImg" src="" height="50px" width="50px"/>
                    <input type="text" id="avatarInput" name="imgPath" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sequence" autocomplete="off" class="layui-input"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="reset" value="重置" class="layui-btn layui-btn-primary">
                <input type="button" id="saveBtn" value="保存" class="layui-btn"/>
            </div>
        </div>

    </form>
</script>
<script id="template2" type="text/html">
    <input lay-event="add" type="button" class="layui-btn layui-btn-xs" value="加下级"/>
    <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑"/>
    {{# if(d.children==null || d.children.length==0){ }}
    <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除"/>
    {{# }  }}
</script>

<script src="/lib/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script th:inline="none">
    layui.use(["layer", "form", "treeTable", "table","upload"], function () {
        var layer = layui.layer;
        var form = layui.form;
        var treeTable = layui.treeTable;
        var $ = layui.jquery;
        var table = layui.table;
        var upload = layui.upload;



        treeTable.render({
            elem: "#table1",
            cols: [[
                {title: "ID", field: "id", maxWidth: "100"},
                {title: "分类名称", field: "name"},
                {title: "分类图标", field: "imgPath"},
                {title: "排序", field: "sequence"},
                {title: "操作", templet: "#template2"}

            ]],
            url: "/category/tree",
            tree: {
                view: {
                    showIcon: false
                }
            }


        });
        form.on('switch(demo-templet-status)', function (obj) {
            var id = this.value;
            var name = this.name;
            layer.tips(id + ' ' + name + ': ' + obj.elem.checked, obj.othis);
        });

        $("#addBtn").on("click", function () {
            layer.open({
                type: 1,
                title: "新增菜单",
                area: ["400px", "400px"],
                content: $("#template1").html()

            });

        $("#parentId").val(0);

        upload.render({
            elem: "#avatarImg",
            url: "/attachment/upload",
            done: function (res, index, upload) {
                if (res.code === 0) {
                    $("#avatarInput").val(res.data.filePath);
                    $("#avatarImg").val("src",res.data.filePath);
                }
            }
        });
    });
        $("body").on("click", "#saveBtn", function () {
            var data = form.val("form1");
            if (!data.name) {
                layer.msg("菜单名不能为空")
                return false;
            }

            $.post("/category/save", data, function () {
                layer.closeAll();
                layer.msg("保存成功");
            });

        });


        treeTable.on("tool", function (obj) {
            var event = obj.event;
            var data = obj.data;//当前这一行
            if (event === "edit") {
                $.get("/category/info?id=" + data.id, function (category) {
                    layer.open({
                        title: "编辑菜单",
                        type: 1,
                        area: ['400px', '400px'],
                        content: $("#template1").html()
                    });
                    form.val("form1", category);
                    upload.render({
                        elem: "#avatarImg",
                        url: "/attachment/upload",
                        done: function (res, index, upload) {
                            if (res.code === 0) {
                                $("#avatarInput").val(res.data.filePath);
                                $("#avatarImg").attr("src", res.data.filePath);
                            }
                        }
                    });
                    //给保存按钮绑定事件
                    $("#saveBtn").on("click", function () {
                        //1.把表单中的数据都取出来
                        var data = form.val("form1");
                        console.log(data)
                        //2.派一个人去发请求，把上边取出来的数据带过去(ajax)
                        //第一个参数 请求地址
                        //第二个参数  请求时传的数据
                        //第三个参数 请求成功之后做什么：这个方法只有200成功是才执行
                        $.post("/category/save", data, function () {
                            //关窗口
                            layer.closeAll();
                            //给成功提示
                            layer.msg("保存成功")
                            //再查一遍
                             $("#searchBtn").click();
                        });

                    });
                });


            }
            if (event === "delete") {
                layer.confirm("你确定要删除该菜单吗？", function () {
                    $.post("/category/delete/" + data.id, function () {
                    });
                    layer.closeAll();
                    layer.msg();
                    // $("#searchBtn").click();
                }, function () {
                });
            }
            if (event === "add") {
                //$.get("/menu/addNext?parentId="+data.id, function (menu) {
                layer.open({
                    title: "新增菜单",
                    type: 1,
                    area: ['400px', '400px'],
                    content: $("#template1").html()
                });
                $("#parentId").val(data.id);

                upload.render({
                    elem: "#avatarImg",
                    url: "/attachment/upload",
                    done: function (res, index, upload) {
                        if (res.code === 0) {
                            $("#avatarInput").val(res.data.filePath);
                            $("#avatarImg").attr("src", res.data.filePath);
                        }
                    }
                });

                form.val("form1", category);

                //给保存按钮绑定事件
                $("#saveBtn").on("click", function () {
                    //1.把表单中的数据都取出来
                    var data = form.val("form1");
                    console.log(data)
                    $.post("/category/addNext", data, function () {
                        layer.closeAll();
                        //给成功提示
                        layer.msg("保存成功")
                        //再查一遍
                        // $("#searchBtn").click();
                    });

                });
            }
        });
    });

</script>
</body>
</html>
